<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 80 %;
            border-collapse: collapse;
        }
        
        td {
            border: 1 px solid# CFCFCF;
            height: 50 px;
        }
        
        .black {
            background: #000;
        }
    </style>

    <script>
        // function Max(n1, n2) {
        //     if (n1 > n2) {
        //         return n1;
        //     } else {
        //         return n2;
        //     }
        // }
        // console.log(Max(373, 77));
        // function getMax(n1, n2) {
        //     if (typeof n1 != "num" || typeof n2 != "num") {
        //         return NaN;
        //     }
        //     return
        // }
        // function Max2(zu) {
        //     var max = zu[0];
        //     for (var i = 0; i <= zu.length; i++) {
        //         if (zu[i] >= max) {
        //             max = zu[i];
        //         }
        //     }
        //     return max;
        // }
        // var max = Max2([114, 514, 373, 77, 109, 190]);
        // console.log(max);
        var row = col = 8;
        var str = '<table>';
        for (var i = 0; i < row; ++i) {
            if (i % 2) { // 奇数行 
                str += '<tr>'
                for (var j = 0; j < col; ++j) {
                    str += j % 2 ? '<td class="black"></td>' : '<td></td>';
                }
                str += '</tr>';
            } else {
                str += '<tr>'
                for (var j = 0; j < col; ++j) {
                    str += j % 2 ? '<td></td>' : '<td class="black"></td>';
                }
                str += '</tr>';
            }
        }
        str += '</table>';
        document.getElementById("table").innerHTML = str;
    </script>

</head>


<body>

</body>

</html>